<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Bridge</title>
</head>
<body>
    <p>JS Bridge</p>
    <!-- <iframe id="iframe1"></iframe> -->

    <script>
        // // const version = window.getVersion() // 异步

        // const iframe1 = document.getElementById('iframe1')
        // iframe1.onload = () => {
        //     const content = iframe1.contentWindow.document.body.innerHTML
        //     console.info('content', content)
        // }
        // iframe1.src = 'my-app-name://api/getVersion'
        // // URL scheme

        // 封装 JS-bridge
        const sdk = {
            invoke(url, data = {}, onSuccess, onError) {
                const iframe = document.createElement('iframe')
                iframe.style.visibility = 'hidden'
                document.body.appendChild(iframe)
                iframe.onload = () => {
                    const content = iframe1.contentWindow.document.body.innerHTML
                    onSuccess(JSON.parse(content))
                    iframe.remove()
                }
                iframe.onerror = () => {
                    onError()
                    iframe.remove()
                }
                iframe.src = `my-app-name://${url}?data=${JSON.stringify(data)}`
            },
            fn1(data, onSuccess, onError) {
                this.invoke('api/fn1', data, onSuccess, onError)
            },
            fn2(data, onSuccess, onError) {
                this.invoke('api/fn2', data, onSuccess, onError)
            },
            fn3(data, onSuccess, onError) {
                this.invoke('api/fn3', data, onSuccess, onError)
            },
        }
    </script>
</body>
</html>